
<template>
<el-card>
    <my-search v-model="pgData" @search="doSearch">
        <el-form-item  slot="time" >
        </el-form-item>

        <el-form-item  slot="title" label="清单名称：">
            <el-input  v-model="pgData.itemName" placeholder="请输入清单名称" clearable></el-input>
        </el-form-item>
        <el-form-item  slot="title" label="清单状态：">
            <my-select :data="listStatus" :props="{label:'value',value:'key'}" v-model="pgData.itemStatus" placeholder="请选择单状态"></my-select>
        </el-form-item>
        <span slot="dr" class="title_btns">
            <el-button size="small" type="success" icon="el-icon-plus" @click="applyJS" v-if = "pgData.isConfirmList == 'false'">申请结算</el-button>
            <el-button size="small" type="primary" icon="el-icon-download" @click="exportList">导出</el-button>
        </span>
    </my-search>
    <div class="amount_area">
        <!-- <span>已审核通过合计：{{"-"}} 元</span> -->
    </div>
    <el-table :data="tableData" :height="tableHeight" border :cell-style="{padding: '5px'}">
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column prop="itemName" label="清单名称" ></el-table-column>
        <el-table-column prop="itemAmount" label="清单总额(元)" ></el-table-column>
        <el-table-column prop="settAmount" label="结算金额(元)" ></el-table-column>
        <el-table-column prop="settType" label="结算方式" >
            <template slot-scope="scope">
                <el-tag size="small" type="danger" v-if="scope.row.settType == 1">按时间结算</el-tag>
                <el-tag size="small" type="primary" v-if="scope.row.settType == 2">按项目结算</el-tag>
                <el-tag size="small" type="info" v-if="scope.row.settType == 3">按招标代理结算</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="receName" label="结算单位" min-width="120"></el-table-column>
        <el-table-column prop="appTime" label="申请时间" min-width="120"></el-table-column>
        <el-table-column prop="itemStatus" label="清单状态" >
            <template slot-scope="scope" >
                <el-tag  size="small" :type ="filterStatus(listStatus,scope.row.itemStatus).type">
                    {{filterStatus(listStatus,scope.row.itemStatus).value}}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="appUserName" label="创建人" ></el-table-column>
        <el-table-column prop="" label="操作" min-width="140">
            <template slot-scope="scope" >
                <el-button type="text"  @click="listDetail(scope.row)">清单详情</el-button>
                <el-button type="text"  @click="listDel(scope.row)" v-if="(scope.row.appId == getGetters('user').dwcode || scope.row.appId == getQuery('dwcode')) && scope.row.isConfirm != 1 && scope.row.isSett != 1">删除</el-button>
                <el-button type="text"  @click="listAffirm(scope.row)" v-if="(scope.row.receId == getGetters('user').dwcode || scope.row.receId == getQuery('dwcode')) && scope.row.isConfirm == 0">清单确认</el-button>
                <el-button type="text"  @click="kfp(scope.row)" v-if="(scope.row.appId == getGetters('user').dwcode || scope.row.appId == getQuery('dwcode')) && scope.row.isConfirm == 1 && scope.row.isInvoice != 1">开具发票</el-button>
                <el-button type="text"  @click="uploadPz(scope.row)" v-if="(scope.row.receId == getGetters('user').dwcode || scope.row.receId == getQuery('dwcode')) && scope.row.isConfirm == 1 && scope.row.isSett == 0 && scope.row.isInvoice == 1">财务确认</el-button>
            </template>
        </el-table-column>
    </el-table>

    <my-pagination
        ref="page"
        v-model="tableData"
        :action="$store.getters.settUrl + '/hcgSettItem'"
        :search="pgData">
    </my-pagination>

    <!-- 申请结算-->
    <my-dialog
        :title="formTitle"
        :width="'1000px'"
        v-model="dialogApplyVisible">
        <apply-hcg-settItem ref="apply" v-if="dialogApplyVisible" @close="dialogApplyVisible = false"  ></apply-hcg-settItem>
    </my-dialog>

    <!-- 开具发票-->
    <my-dialog
        :title="formTitle"
        :width="'40%'"
        v-model="dialogUploadfpVisible">
        <uploadfp ref="uploadfp" v-if="dialogUploadfpVisible" @close="dialogUploadfpVisible = false" :rowguid="rowguid" :requesturl="requestUrl" :needinvoice="needinvoice"></uploadfp>
    </my-dialog>

    <!-- 财务确认-->
    <my-dialog
        :title="formTitle"
        :width="'40%'"
        v-model="dialogUploadpzVisible">
        <uploadpz ref="uploadpz" v-if="dialogUploadpzVisible" @close="dialogUploadpzVisible = false" :rowguid="rowguid" :qdname="itemName" :requesturl="requestUrl"></uploadpz>
    </my-dialog>

</el-card>

</template>

<script>
import LIST_MIXIN from '@mixins/list-page'
import COMMON_METHODS from '@mixins/common-methods.js'
import applyHcgSettItem from './applyHcgSettItem.vue'
import uploadfp from '../settItem/uploadfp.vue'
import uploadpz from '../settItemChild/uploadpz.vue'


export default {
    mixins: [ LIST_MIXIN,COMMON_METHODS],
    props:[],
    components:{applyHcgSettItem,uploadpz,uploadfp},
    data: function(){
        return{
            pgData:{
                itemName:'',
                itemStatus:'',
                isConfirmList:this.getQuery('isConfirmList'),
            },
            tableData:[],
            dialogApplyVisible:false,
            dialogUploadfpVisible:false,
            dialogUploadpzVisible:false,
            formTitle:'',
            rowguid:'',
            requestUrl:'',
            token:'',
            listStatus:[
                {value:'待确认',key:'1',type:'info'},
                {value:'待开票',key:'2',type:'warning'},
                {value:'待结算',key:'3',type:'primary'},
                {value:'已结算',key:'4',type:'success'},
            ],
            needinvoice:'',
        }
    }, 
    computed:{
 
    },
    watch:{
        dialogApplyVisible: function(n, o){
            if(!n){
                this.doSearch();
            }
        },
        dialogUploadpzVisible: function(n, o){
            if(!n){
                this.doSearch();
            }
        },
        dialogUploadfpVisible:function(n,o){
            if(!n){
                this.doSearch();
            }
        }
    },

    methods: {
        doSearch:function(){
            this.$refs.page.queryData();
        },
        //申请结算
        applyJS:function(){
            this.dialogApplyVisible = true;
            this.formTitle = '申请结算';
        },
        //清单详情
        listDetail:function(row){
            if(this.getQuery('token')){
                this.goto({
                    path: './detail',
                    query: {
                        rowguid: row.id,
                        token:this.getQuery('token')
                    }
                })
            }else{
                this.goto({
                    path: './detail',
                    query: {
                        rowguid: row.id
                    }
                }) 
            }
        },
        //清单确认
        listAffirm:function(row){
            var that = this;
            ShowConfirm('是否确认当前清单' , 'warning', function() {
                that.$post(that.$store.getters.settUrl + '/hcgSettItem/confirm',{
                    rowguid:row.id
                },function(data,res){
                    if(res.code == 'v'){
                        ShowMsg('确认成功','success');
                    }else{
                        ShowMsg(res.msg,'warning');
                    }
                    that.doSearch();
                })
            }, function() {
                  ShowMsg('已取消操作','info');
            })

        },
        //删除清单
        listDel:function(row){
            var that = this;
            ShowConfirm('删除后需重新添加结算清单，是否确定？' , 'warning', function() {
                that.$delete(that.$store.getters.settUrl + '/hcgSettItem/'+row.id,{},function(data){
                    ShowMsg('删除成功','success');
                    that.doSearch();
                })
            }, function() {
                  ShowMsg('已取消删除操作','info');
            })
        },
        //开具发票
        kfp:function(row){
            this.needinvoice = this.getQuery('needinvoice') ? this.getQuery('needinvoice') : this.getGetters('user').needinvoice,
            this.requestUrl = '/bhtong/settmg/hcgSettItem/invoice',
            this.formTitle = '上传发票';
            this.dialogUploadfpVisible = true;
            this.rowguid = row.id;
        },
        //财务确认
        uploadPz:function(row){
            this.requestUrl = '/bhtong/settmg/hcgSettItem/sett',
            this.dialogUploadpzVisible = true;
            this.formTitle = '财务确认';
            this.rowguid = row.id;
            this.itemName = row.itemName;
        },
        //导出清单
        exportList:function(){
            if(this.tableData.length !=0){
                var search = toSearch({
                    itemName: this.pgData.itemName,
                    itemStatus: this.pgData.itemStatus,
                    token:this.getQuery('token') ? this.getQuery('token') : this.getGetters('user').token,
                    isExport: true,
                });
                window.open('/bhtong/settmg/hcgSettItem' + search);
            }else{
                ShowMsg('当前清单暂无数据，暂不支持导出', 'warning');
            }
        },
    },
    mounted() {

    }
}
</script>

<style scoped lang="scss">
.title_btns{
    float: right;
}
.amount_area{
    text-align: right;
    padding-bottom: 10px;
}

::v-deep .el-table th > .cell {
    text-align: center;
}
::v-deep .el-table .cell {
    text-align: center;
}  


</style>
